<script setup>
  // 1. 导入请求包
  import msgApi from '@/apis/message.js'
  // 2. 页面加载完成后请求数据交给响应式变量
  import {onMounted,ref} from 'vue'

  let page = 1
  const list = ref([])
  const isTriggered = ref(false)
  onMounted(async () => {
     let res = await msgApi.list(200)
    // 3. 将响应式数据绑定到模版属性中
    list.value = res.data.data.items
  })

  async function onScrollToLower() {
    page++ //增加页面
    //将新的页码对应的数据加载回来
    let res = await msgApi.list(201,page,10)
    //判断如果没有数据，则不追加，否则追加
    if(res.data.data.items) {
      // 使用数组的push方法，将服务器最新的数据追加到页面的最下方
      list.value.push(...res.data.data.items)
      console.log('已经触底',page)
    }
  }

   async function onScrollViewRefresh() {
      // 重新请求第一页数据，将来接口有新数据我们就可以获取最新数据
      // 温馨提示：由于我们的接口没有人维护数据，所以第1页数据是老数据
      console.log('下拉刷新触发...')
      // 将page重置为1
      isTriggered.value = true //打开下拉刷新动画
      page = 1
      let res = await msgApi.list(201, page, 10)
      list.value = res.data.data.items
      isTriggered.value = false //关闭下拉刷新动画
      console.log( res.data.data.items);
    }
</script>
<template>
  <scroll-view
  class="scroll-view"

  scroll-y
   @scrolltolower="onScrollToLower"
   refresher-enabled

   @refresherrefresh="onScrollViewRefresh"
   :refresher-triggered="isTriggered"
   >
    <view class="scroll-view-wrapper">
      <view class="message-action">
        <text class="iconfont icon-clear"></text>
        全部已读
      </view>
      <uni-list :border="false">
        <uni-list-item
          v-for="item in list"
          :key="item.id"
          to="/subpkg_message/content/index"
          ellipsis="1"
          :title="item.title"
          :rightText="item.created"
        >
          <template v-slot:header>
            <text class="dot"></text>
          </template>
        </uni-list-item>
      </uni-list
    ></view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';
</style>
